<template>
	<view class="center">
	
		<hea-ders title="客户列表">
			<image slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
				<image slot='Lright' src="../../../static/images/s36.png" @click="Sizer"></image>
				<image slot='Rright' src="@/static/images/tb_icon.png" ></image>
		</hea-ders>
		<view class="search">
			<text>分布</text>
			<image src="../../../static/images/search.png" mode="widthFix"></image>
			<input type="text" value="" placeholder-style="font-size:24rpx;" placeholder="编号/名称" />
		</view>
		<view class="number">
			<view class="number_shu">
				<text class="number_zong">客户总数</text>
				<text class="number_ls">5</text>
			</view>
			<view class="xian"></view>
			<view class="number_shu">
				<text class="number_zong">客户欠款</text>
				<text class="number_ls">0</text>
			</view>
		</view>
		<view class="info">
			<view class="info_tox">
				<view class="info_iam">
					<view class="">
						<image src="../../../static/icon_collect.png" mode="widthFix"></image>
						<text>123</text>
					</view>
					<view class="pif">
						<text>批发客户</text>
					</view>
				</view>
				<view class="tel">
					<text>联系人：123456</text>
					<text>电话：1513135135</text>
				</view>
				<view class="order">
					<text>地址：江苏省徐州市泉山区中山南路</text>
					<image v-if="!flag" src="@/static/images/s37.png" mode="widthFix" @click="unfold"></image>
				</view>
				<view class="orders" v-if="flag">
					<view class="shijian">
						<text>应收欠款：0</text>
						<text>最近交易时间：2020-06-04</text>
						<text>最近跟进时间：2020-06-04</text>
						<text>最近登陆时间：2020-06-04</text>
					</view>
				
					<image v-if="flag" src="../../../static/images/s1.png" mode="widthFix" @click="flag =!flag"></image>
				</view>
			</view>
			<view class="bai">
				<view class="flexon" @click="plan">
					<image src="../../../static/images/s2.png" mode="widthFix"></image>
					<text>拜访计划</text>
				</view>
				<view class="xian"></view>
				<view class="flexon" @click="gathering ">
					<image src="../../../static/images/s3.png" mode="widthFix"></image>
					<text>收款</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			heaDers
		},
		data() {
			return {
				flag: false,
				flags:''
			}
		},
		onLoad(options) {
			this.flags = options.flag
			//console.log(this.flags)
			if(this.flags){
					uni.showModal({
						title:"11",
						showCancel:false
					})
				}
			},
		
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			plan() {
				uni.navigateTo({
					url: '../visit/visit'
				})
			},
			unfold(){
				this.flag = !this.flag
			},
		
			 gathering() {
				 console.log(111)
				uni.navigateTo({
					url: 'gathering/gathering'
				})
			 },
			Sizer(){
				uni.navigateTo({
					url:'Sizer/Sizer'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #fff;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					display: inline-block;
					height: 40rpx;
					width: 40rpx;
					margin-left: 10rpx;
				
				}
			}
		}

		.search {
			position: relative;
			display: flex;
			align-items: center;
			padding: 30rpx;
			width: 100%;
			box-sizing: border-box;

			text {
				flex: 1;
				color: rgba(36, 153, 246, 1);
				font-size: 24rpx;
				font-weight: 500;
				font-family: PingFang SC;
				letter-spacing: 5rpx;
			}

			input {
				flex: 8;
				background-color: rgba(245, 245, 245, 1);
				height: 64rpx;
				border-radius: 32rpx;
				padding-left: 80rpx;
			}

			image {
				width: 32rpx;
				position: absolute;
				top: 38%;
				left: 17%;
			}
		}

		.number {
			width: 100%;
			height: 152rpx;
			box-sizing: border-box;
			background: rgba(35, 153, 246, 1);
			display: flex;
			align-items: center;

			.xian {
				width: 4rpx;
				height: 50%;
				background-color: #fff;
			}

			.number_shu {
				flex: 1;
				display: flex;
				flex-direction: column;
				text-align: center;

				.number_zong {
					font-size: 24rpx;
					font-weight: 400;
					font-family: PingFang SC;
					color: rgba(197, 229, 255, 1);
					opacity: 1;
				}

				.number_ls {
					font-size: 28rpx;
					font-weight: 400;
					font-family: PingFang SC;
					color: rgba(255, 255, 255, 1);
					opacity: 1;
				}
			}
		}

		.info {
			width: 100%;
			box-sizing: border-box;

			.info_tox {
				width: 100%;
				padding: 10rpx 30rpx;
				box-sizing: border-box;

				.info_iam {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;

					image {
						width: 88rpx;
						vertical-align: top;
					}

					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 33rpx;
						color: rgba(33, 33, 33, 1);
						opacity: 1;
					}

					.pif {
							
						text {
							display: inline-block;
							width: 100rpx;
							height: 24rpx;
							border: 1rpx solid rgba(37, 147, 233, 1);
							background: rgba(208, 233, 250, 0.5);
							opacity: 1;
							color: rgba(37, 147, 233, 1);
							/*#ifdef APP-PLUS */
								font-size: 20rpx;
							 /*#endif*/
							font-weight: 400;
							font-family: PingFang SC;
							line-height: 24rpx;
							padding: 5rpx;
							text-align: center;
						}
						
					}
				}

				.tel {
					display: flex;

					text {
						flex: 1;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 33rpx;
						color: rgba(97, 97, 97, 1);
						opacity: 1;
					}
				}

				.order {
					display: flex;
					
					align-items: center;
					text {
						flex: 1;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 33rpx;
						color: rgba(97, 97, 97, 1);
						opacity: 1;
					}

					image {
						width: 32rpx;
					vertical-align: middle;
					}
				}

				.orders {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.shijian {
						display: flex;
						flex-direction: column;

						text {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 33rpx;
							color: rgba(97, 97, 97, 1);
							opacity: 1;
						}
					}

					image {
						width: 32rpx;
						
					}
				}
			
			}

			.bai {
				width: 100%;
				background-color: rgba(37, 147, 233, 1);
				box-sizing: border-box;
				display: flex;
				flex: 1;
				align-items: center;

				.flexon {
					border-right: 1rpx solid #fff;
					flex: 1;
					text-align: center;

					image {
						width: 24rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(255, 255, 255, 1);
						opacity: 1;
					}
				}

			}
		}
	}
</style>
